<template>
  <a-drawer
      :title="title"
      :width="$store.getters.isMobile ? 350 : 460"
      :visible="visible"
      :body-style="{
        height: 'calc(100% )',
        boxSizing: 'border-box',
        overflowY: 'auto',
      }"
      @close="onClose"
      :destroyOnClose="true"
  >
    <!-- 线索信息 -->
    <div class="content-box">
      <a-form ref="formRef" layout="vertical">
        <a-col :span="24">
          <a-form-item label="公司名称">
            {{ detail.name || "--" }}
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="税号">
            {{ detail.tax_id || "--" }}
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="负责人">
            <span>{{ detail.head_name || "--" }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="联系号码">
            <span>{{ detail.head_phone || "--" }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="所在区域">
            <div>
              <span v-if="detail.address?.provinceName">{{ detail.address.provinceName }}</span>
              <span v-if="detail.address?.cityName">{{ detail.address.cityName }}</span>
              <span v-if="detail.address?.districtName">{{ detail.address.districtName }}</span>
              <span v-if="detail.address?.streetName">{{ detail.address.streetName }}</span>
            </div>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="开户行">
            <div>{{ detail.opening_bank || "--" }}</div>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收款账号">
            <div>{{ detail.receiving_account || "--" }}</div>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="营业执照">
            <div>
              <a-image :src="license"/>
            </div>
          </a-form-item>
        </a-col>

      </a-form>
    </div>

    <div class="drawer-footer" v-if="detail.approval_status == 0">
      <a-space>
        <a-button type="primary" @click="changeApprovalStatus(1)">同意</a-button>
        <a-button type="primary" danger @click="changeApprovalStatus(0)">拒绝</a-button>
      </a-space>
    </div>


    <a-modal v-model:visible="rejectVisible" title="拒绝" @ok="handleReject">
      <a-form>
        <a-form-item label="拒绝原因" name="reject_reason" v-bind="validateInfos.reject_reason">
          <a-textarea placeholder="请输入拒绝原因" v-model:value="modelRef.reject_reason"/>
        </a-form-item>
      </a-form>
    </a-modal>

  </a-drawer>
</template>

<script>
import {watch, ref, reactive, toRefs, createVNode} from "vue";
import request from "../../../../common/utils/request";
import {message, Form, Modal} from "ant-design-vue";
import utils from '@/common/utils/utils'
import {ExclamationCircleOutlined} from '@ant-design/icons-vue'

const useForm = Form.useForm
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props, context) {
    const state = reactive({
      title: "渠道公司详情",
      detail: {},
      rejectVisible: false,
      license: ""

    });


    const getDetail = () => {
      console.log("获取详情")
      request.get("/org", "/business/customer/channel/channelCompanyDetail", {id: props.id}).then(res => {
        console.log(res)
        state.detail = res.data

        state.license = state.detail?.business_license[0]?.url || ""
        // //省市区
        // const {provinceId, cityId, districtId, streetId} = state.detail.address;
        // areas = state.detail.address;
        // if (provinceId) {
        //   area.value.push(provinceId);
        //   utils.getAreaOptions(1, {}, false).then((list) => {
        //     areaOptions.value = list;
        //     let index = list.findIndex((item) => item.value == provinceId);
        //     if (cityId && index > -1) {
        //       area.value.push(cityId);
        //       let province = areaOptions.value[index];
        //       utils.getAreaOptions(2, {id: provinceId}, false).then((cityList) => {
        //         if (cityList.length) {
        //           province.children = cityList;
        //           index = cityList.findIndex((item) => item.value == cityId);
        //           if (districtId && index > -1) {
        //             area.value.push(districtId);
        //             let city = province.children[index];
        //             utils
        //                 .getAreaOptions(3, {id: cityId}, false)
        //                 .then((districtList) => {
        //                   if (districtList.length) {
        //                     city.children = districtList;
        //                     index = districtList.findIndex(
        //                         (item) => item.value == districtId
        //                     );
        //                     if (streetId && index > -1) {
        //                       area.value.push(streetId);
        //                       let district = city.children[index];
        //                       utils
        //                           .getAreaOptions(4, {id: districtId}, false)
        //                           .then((streetList) => {
        //                             if (streetList.length) {
        //                               district.children = streetList;
        //                               index = streetList.findIndex(
        //                                   (item) => item.value == streetId
        //                               );
        //                             } else {
        //                               district.isLeaf = true;
        //                             }
        //                           });
        //                     }
        //                   } else {
        //                     city.isLeaf = true;
        //                   }
        //                 });
        //           }
        //         } else {
        //           province.isLeaf = true;
        //         }
        //       });
        //     }
        //   });
        // }
        // modelRef.area = area.value;

      })
    }

    const modelRef = reactive({
      reject_reason: "",
    });

    const rulesRef = reactive({
      reject_reason: [{
        required: true,
        message: "请输入拒绝原因",
      }],
    });
    const {resetFields, validate, validateInfos} = useForm(
        modelRef,
        rulesRef
    );

    const handleReject = () => {

      validate().then(() => {
        request.post("/org", "/business/customer/channel/handleChannelCompany", {
          id: props.id,
          status: 2,
          reject_reason: modelRef.reject_reason
        }).then(res => {
          console.log(res)
          state.rejectVisible = false
          message.success("操作成功!")
          context.emit("closeDetail");
        })
      })

    }

    const handleAgree = () => {
      request.post("/org", "/business/customer/channel/handleChannelCompany", {
        id: props.id,
        status: 1,
      }).then(res => {
        console.log(res)
        message.success("操作成功!")
        resetFields()
        context.emit("closeDetail");
      })
    }

    const changeApprovalStatus = (val) => {
      if (val == 1) {
        //同意
        Modal.confirm({
          title: () => "提示",
          content: () => "确定通过该申请吗？",
          icon: () => createVNode(ExclamationCircleOutlined),
          okText: () => "确定",
          onOk() {
            handleAgree()
          },
        });
      } else {
        // 拒绝
        state.rejectVisible = true
      }
    }

    const onClose = () => {
      context.emit("closeDetail");
    };

    const init = () => {
      getDetail();
    };

    watch(
        () => props.visible,
        (val) => {
          if (val) {
            init();
          } else {
          }
        }
    );


    return {
      ...toRefs(state),
      onClose,
      changeApprovalStatus,
      validateInfos,
      modelRef,
      handleReject,
    };
  },
};
</script>

<style lang="less" scoped>
.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.radio-box {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  text-align: center;
  padding: 0 16px;
}

.content-box {
  flex: 1;
  padding: 10px;
  overflow: auto;
}

:deep(.ant-image) {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
}

.title {
  height: 30px;
  line-height: 30px;
  color: #333;
  font-weight: 500;
  font-size: 15px;
  position: relative;
  padding-left: 10px;
}

.title::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 8px;
  width: 4px;
  height: 14px;
  background-color: #1c90ff;
  border-radius: 4px;
}

.m-t-20 {
  margin-top: 20px;
}

:deep(.ant-timeline-item) {
  padding-bottom: 10px;
}
</style>
